<template>
    <div>
        <div id="maychar"></div>
    </div>
</template>
<script lang="js">
import { defineComponent, inject, onMounted } from "vue";
import required from '@/utils/request'
import { ElMessage } from 'element-plus'

export default defineComponent({
    setup() {
        onMounted(() => {
            changetype();
        });
        let echarts = inject("echarts"); // 主要
        //折线图
        const changetype = async () => {
            //因没有数据作为支撑暂时写死
            // const res = await required.get('/sys/user/getNewUser');

            // 获取组件实例
            const machart = echarts.init(document.getElementById("maychar"));
            // 设置配置项
            const option = {
                xAxis: {
                    data: ["八月份", "九月份", "十月份", "十一月份", "十二月份"],
                },
                yAxis: {},
                series: [
                    {
                        data: [10, 22, 28, 43, 49],
                        type: "line",
                        stack: "x",
                    }
                ],
            };
            // 复制
            machart.setOption(option);
            // 根据页面大小自动响应图表大小
            window.addEventListener("resize", function () {
                machart.resize();
            });
        };
        return {
            changetype,
        };
    },
});

</script>

<style lang="scss" scoped>
#maychar {
    width: 550px;
    height: 350px;
}
</style>